<template>
	<view class="store-management-container">
		<uv-navbar title="门店管理" @leftClick="goBack" bgColor="rgba(0,0,0,0)"></uv-navbar>
		<uv-gap height="50" bgColor="transparent" />
		
		<view class="text-container">
			<view class="character">新增门店</view><uv-icon name="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c7221202508161105438211.png" size="30"></uv-icon>
		</view>
		<view class="pd30">
			<view class="store-stats">
				<span>门店总数 2</span>
				<span>剩余门店数量 1</span>
			</view>
		</view>
		
		<!-- 搜索框 -->
		<uv-gap height="10" bgColor="transparent" />
		<view class="section">
			<uv-search v-model="keyword" bgColor="#F4F5F7" :showAction='false' placeholder="搜索门店名称"
				placeholderColor="#B1B1B1" />
		</view>


		<!-- 门店列表 -->
		<view class="store-list">
			
			<!-- <uv-cell-group>
				<uv-cell v-for="(store, index) in filteredStores" :key="index" :title="store.name"
					:label="`${store.nfcCount} NFC路径链接`" :border="false">
					<template #icon>
						<uv-icon name="shop" size="20" color="#07c160"></uv-icon>
					</template>
					<template #right-icon>
						<div class="store-actions">
							<uv-button type="primary" size="mini" plain @click="copyNfc(store)">
								复制
							</uv-button>
							<uv-button type="primary" size="mini" plain @click="showQrCode(store)">
								贴一下二维码
							</uv-button>
							<uv-button type="primary" size="mini" plain @click="viewStore(store)">
								查看
							</uv-button>
							<uv-button type="primary" size="mini" plain @click="downloadStore(store)">
								下载
							</uv-button>
						</div>
					</template>
				</uv-cell>
			</uv-cell-group> -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue';
	import {
		getIconPath
	} from '@/util'
	const searchValue = ref('');

	const goBack = () => {
		// 返回上一页逻辑
		console.log('返回');
	};

	const addStore = () => {
		// 新增门店逻辑
		console.log('新增门店');
	};

	const copyNfc = store => {
		// 复制NFC逻辑
		showToast('复制成功');
		console.log('复制NFC', store);
	};

	const showQrCode = store => {
		// 显示二维码逻辑
		console.log('显示二维码', store);
	};

	const viewStore = store => {
		// 查看门店逻辑
		console.log('查看门店', store);
	};

	const downloadStore = store => {
		// 下载门店信息逻辑
		console.log('下载门店', store);
	};
</script>

<style scoped>
	.store-management-container {
		height: 100vh;
		background: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0811/0e9f5202508111141299068.jpg') no-repeat;
		background-size: 100% 100%;
	}

	.nav {
		background: transparent;
	}

	.text-container {
		display: flex;
		gap: 8px;
		margin-left:30px;
		align-items: center;
	}

	.character {
		position: relative;
		font-family: "Microsoft YaHei", "黑体", sans-serif;
		font-weight: bold;
		font-size: 28px;
		letter-spacing: 8px;
		color: #4CAF50;
		/* 鲜明的绿色 */
		text-align: center;
	}

	.character::after {
		content: "";
		position: absolute;
		bottom: -6px;
		left: 0;
		width: 100%;
		height: 20px;
		background-color: rgba(76, 175, 80, 0.3);
		/* 半透明的浅绿色 */
		border-radius: 4px;
	}

	.section {
		padding: 0 15px;
	}
    .pd30 {
		padding-left: 30px;
		margin: 20px 0 10px 0;
	}
	.store-stats {
		width: 200px;
		padding: 10px 15px;
		font-size: 14px;
		color: #333;
		display: flex;
		justify-content: space-between;
		background-color: #eafef4;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		border-radius: 15px;
	}

	.store-search {
		margin: 10px 15px;
	}

	.store-list {
		margin-top: 10px;
	}

	.store-actions {
		display: flex;
		gap: 5px;
	}
</style>